<template>
	<div class="home-main">
		<div class="box-top">
			<div style="width: 50%">
				<h5 style="margin-left:10px;border-left:5px solid #FF8100;padding-left:10px">报警分类占比</h5>
				<div id="pieBox" ></div>
			</div>
		<div style="width: 50%">
				<h5 style="margin:10px;border-left:5px solid #FF8100;padding-left:10px">报警分类数量</h5>
				<div id="columnBox" ></div>
			</div>
		</div>
		<div style="height: 400px;margin-top:100px">
				<h5 style="margin:10px;border-left:5px solid #FF8100;padding-left:10px">重点人员报警趋势</h5>
				<div id="container" ></div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			pieData: [
				{ type: "刑满释放人员", value: 11 },
				{ type: "社区矫正人员", value: 8 },
				{ type: "肇事肇祸人员", value: 16 },
				{ type: "艾滋病危险人员", value: 12 },
				{ type: "吸毒人员", value: 74 },
				{ type: "信访人员", value: 35 },
				{ type: "疑似邪教人员", value: 18 },
				{ type: "退役人员", value: 25 },
			],
		};
	},
	mounted() {
		this.lineEcharts();
		this.pieEcharts();
		this.columnEcharts();
	},
	methods: {
		pieEcharts() {
			let that = this;
			const piePlot = new this.$g2plot.Pie("pieBox", {
				appendPadding: 10,
				data: that.pieData,
				angleField: "value",
				colorField: "type",
				radius: 0.8,
				label: {
					type: "spider",
					labelHeight: 28,
					content: "{name}\n{percentage}",
				},
				interactions: [
					{ type: "element-selected" },
					{ type: "element-active" },
				],
			});

			piePlot.render();
        },
        columnEcharts() {
			let that = this;
			const columnPlot = new this.$g2plot.Column("columnBox", {
				data:that.pieData,
				xField: "type",
				yField: "value",
				columnWidthRatio: 0.8,
				meta: {
					type: {
						alias: "类别",
					},
					value: {
						alias: "数量",
					},
				},
			});

			columnPlot.render();
        },
        lineEcharts() {
			let that = this;
			const line = new this.$g2plot.Line("container", {
								data:that.pieData,
				xField: "type",
				yField: "value",
				padding: "auto",
				xAxis: {
					tickCount: 5,
					tickInterval: 1,
				},
			});
			line.render();
		},
	},
};
</script>

<style lang='scss' scoped>
.home-main {
	.box-top {
		width: 100%;
		height: 400px;
		margin-top: 20px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
}
</style>